<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        <label style="margin-right: 10px">套餐名称：</label>
        <el-input v-model="name"
                  placeholder="请填写套餐名称"
                  style="width: 14%"
        />

        <label style="margin-right: 10px; margin-left: 20px">套餐分类：</label>
        <el-select v-model="categoryId"
                   style="width: 14%"
                   placeholder="请选择">
          <el-option v-for="item in dishCategoryList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"/>
        </el-select>

        <label style="margin-right: 10px; margin-left: 20px">售卖状态：</label>
        <el-select v-model="status"
                   style="width: 14%"
                   placeholder="请选择">
          <el-option v-for="item in saleStatus"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"/>
        </el-select>
        <el-button class="normal-btn continue" @click="handleSearch">
          查询
        </el-button>
        <div class="tableLab">
          <el-button type="primary" class="delBut non" @click="handleDelSetMeal('B')">
            批量删除
          </el-button>
          <el-button type="primary" style="margin-left: 15px"
                     @click="handleAddSetMeal">
            + 新建套餐
          </el-button>
        </div>
      </div>
      <el-table v-if="records.length" :data="records" style="width: 100%" stripe
                class="tableBox" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="25px" />
        <el-table-column prop="name" label="套餐名称" />
        <el-table-column prop="image" label="图片">
          <template v-slot="scope">
            <el-image style="width: 80px; height: 40px; border: none; cursor: pointer" :src="scope.row.image">
              <div slot="error" class="image-slot">
                <img src="./../../assets/noImg.png"
                     style="width: auto; height: 40px; border: none">
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="套餐分类" />
        <el-table-column prop="price" label="套餐价">
          <template v-slot="scope">
            <span>￥{{ ((scope.row.price ).toFixed(2) * 100) / 100 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="售卖状态">
          <template v-slot="scope">
            <div class="tableColumn-status" :class="{ 'stop-use': String(scope.row.status) === '0' }">
              {{ String(scope.row.status) === '0' ? '停售' : '启售' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime"
                         label="最后操作时间">
          <!-- <template slot-scope="scope">
            {{ moment(scope.row.lastUpdateTime).format('YYYY-MM-DD h:m:s') }}
          </template> -->
        </el-table-column>
        <el-table-column label="操作" width="250" align="center">
          <template v-slot="scope">
            <el-button type="text" size="small" class="blueBug" @click="handleUpdateSetMeal(scope.row)">
              修改
            </el-button>
            <el-button type="text"  size="small" class="delBut" @click="handleDelSetMeal('S', scope.row.id)">
              删除
            </el-button>
            <el-button type="text" size="small"  class="blueBug non" @click="handleStartOrStop(scope.row)">
              {{ scope.row.status == '1' ? '停售' : '启售' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pageList"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { getCategoryByType } from "@/api/category";
import {getSetmealPage, deleteSetmeal, enableOrDisableSetmeal } from "@/api/setMeal";

export default {
  data() {
    return {
      name: '',
      page: 1,
      pageSize: 10,
      total: 0,
      records: [],
      dishCategoryList: [],//套餐分类data
      categoryId: '',//套餐分类id
      checkAll: false,
      checkArr: [],
      saleStatus: [
        {
          value: 0,
          label: '停售'
        },
        {
          value: 1,
          label: '启售'
        }
      ],
      status: '',//售卖状态
      ids: []
    }
  },
  created() {
    const _this = this;
    getCategoryByType({type: 2}).then(res => {
      if (res.data.code === 1) {
        _this.dishCategoryList = res.data.data;
      }
    });
    //页面数据初始化
    _this.handleSearch();
  },
  methods: {
    //分页查询
    handleSearch() {
      const _this = this;
      //封装分页查询参数
      const params = {
        page: _this.page,
        pageSize: _this.pageSize,
        name: _this.name || undefined,
        categoryId: _this.categoryId || undefined,
        status: _this.status
      };
      getSetmealPage(params).then(res => {
        if (res.data.code === 1) {
          _this.records = res.data.data.records;
          _this.total = res.data.data.total;
        }
      }).catch(err => {
        _this.$message.error('请求出错了：' + err.message);
      });
    },

    // pagination
    // pageSize发生变化
    handleSizeChange(pageSize) {
      const _this = this;
      _this.pageSize = pageSize;
      this.handleSearch();
    },

    // page发生变化
    handleCurrentChange(page) {
      const _this = this;
      _this.page = page;
      this.handleSearch();
    },

    //新增套餐
    handleAddSetMeal() {
      const _this = this;
      // 路由跳转，新增套餐组件
      this.$router.push({
        path: '/setmeal/add'
      });
    },

    //修改套餐
    handleUpdateSetMeal(row) {
      const _this = this;
      // 路由跳转，修改套餐组件
      _this.$router.push({
        path: '/setmeal/update',
        query: {
          id: row.id
        }
      });
    },

    //删除套餐
    handleDelSetMeal(type, id) {
      const _this = this;
      if (type === 'B' && id === null) {
        _this.$message.error('请选择删除对象');
      }
      this.$confirm('确定删除该套餐?', '确定删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteSetmeal(type === 'B' ? _this.checkList.join(',') : id).then(res => {
          if (res.data.code === 1) {
            _this.$message.success('删除成功！');
            _this.handleSearch();
          } else {
            _this.$message.error(res.data.msg);
          }
        }).catch(err => {
          _this.$message.error('请求出错了：' + err.message)
        });
      });
    },

    //状态更改
    handleStartOrStop(row: any) {
      const _this = this;
      _this.$confirm('确认修改该套餐的状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const params = {
          id: row.id,
          status: row.status === 0 ? 1 : 0
        };
        enableOrDisableSetmeal(params).then(res => {
          if (res.data.code === 1) {
            _this.$message.success('套餐的状态修改成功！');
            _this.handleSearch();
          } else {
            _this.$message.error(res.data.msg);
          }
        }).catch(err => {
          _this.$message.error('请求出错了：' + err.message);
        });
      });
    },

    //全选
    handleSelectionChange(val: any) {
      console.log('当前勾选的数目:'+val.length);
      const _this = this;
      val.forEach((n: any) => {
        _this.checkArr.push(n.id)
      });
      _this.checkList = _this.checkArr;
    },
  }
}
</script>
<style lang="scss">
.el-table-column--selection .cell {
  padding-left: 10px;
}
</style>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;

    .container {
      background: #fff;
      position: relative;
      z-index: 1;
      padding: 30px 28px;
      border-radius: 4px;

      .tableBar {
        margin-bottom: 20px;
        .tableLab {
          float: right;
          span {
            cursor: pointer;
            display: inline-block;
            font-size: 14px;
            padding: 0 20px;
            color: $gray-2;
          }
        }
      }

      .tableBox {
        width: 100%;
        border: 1px solid $gray-5;
        border-bottom: 0;
      }

      .pageList {
        text-align: center;
        margin-top: 30px;
      }
      //查询黑色按钮样式
      .normal-btn {
        background: #333333;
        color: white;
        margin-left: 20px;
      }
    }
  }
}
</style>
